<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv=X-UA-Compatible content="IE=edge">
		<meta name=viewport content="width=device-width,initial-scale=1">
		
		<title>百斯特补打密码生成器</title>		
		<style>
			html, body {
				margin: 0;
				padding: 0;
			}

			#app {
				padding: 0 0 0 5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div style="font-size: x-large; font-weight: bolder;">加密</div>
			<div>
				<div>
					补打密码:
				</div>
				<textarea v-model="mReprintPassword"
					placeholder="请输入补打密码" :style="cpuInputStyle"></textarea>
			</div>
			<div>
				<div>
					加密后的补打密码:
				</div>
				<textarea v-model="cpuBase64Str" :style="cpuTextAreaStyle" readonly></textarea>
			</div>


			<div style="font-size: x-large; font-weight: bolder;">解密</div>
			<div>
				<div>
					加密后的补打密码:
				</div>
				<textarea v-model="mBase64Str"
					placeholder="请输入补打密码" :style="cpuTextAreaStyle"></textarea>
			</div>
			<div>
				<div>
					补打密码:
				</div>
				<textarea v-model="cpuReprintPassword" :style="cpuInputStyle" readonly></textarea>
			</div>
			<div>
				操作视频保存在微信收藏中, 搜索标签 [佛山百斯特]
			</div>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="./script/vue@2.7.16.js"></script>
	<!-- 开发环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script> -->
	<!-- 生产环境版本 -->
	<!-- <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script> -->	

	<script>
		var vueApp = new Vue({
			el: "#app",
			data: function () {
				return {
					mReprintPassword: "",
					mBase64Str: "",
				}
			},
			computed: {
				cpuBase64Str: function() {
					// !!!遇到的坑!!! btoa 只能转换 ASCII
					// const r = btoa(this.mReprintPassword);

					const r = btoa(encodeURIComponent(this.mReprintPassword).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        				return String.fromCharCode('0x' + p1);
    				}));
					return r;
				},

				cpuReprintPassword: function() {
					// !!!遇到的坑!!! atob 只能转换 ASCII
					// const r = atob(this.mBase64Str);
					const r = decodeURIComponent(atob(this.mBase64Str).split('').map(function(c) {
						return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
					}).join(''));
					return r;
				},

				cpuInputStyle: function() {					
					return {
						"width": `${window.innerWidth - 20}px`,
						"height": `50px`
					};
				},
				cpuTextAreaStyle: function() {					
					return {
						"width": `${window.innerWidth - 20}px`,
						"height": `100px`
					};
				}
			}
		});
	</script>
	<style>		
	</style>
</html>
